iT邦幫忙

2022 iThome 鐵人賽

DAY 24
0
自我挑戰組

從零開始的 Tailwind CSS 學習之旅系列 第 24

Day24 -【實戰演練】Taiwan NO.1 Tour - header

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20221007/20152047sey38gVUgV.png

實戰演練 - Day1

首先恭喜各位看到這邊。(灑花
相信各位對於 Tailwind CSS 也有一定的認識,接下來我們將進行實戰演練,每天練習一個區塊,為期6天。
帶著各位使用 Tailwind CSS 開發網頁,包含 RWD (pc、pad、mobile)哦,那麼我們開始吧!

今日進度

pc
https://ithelp.ithome.com.tw/upload/images/20221008/20152047PxXhRmnHEh.png

pad
https://ithelp.ithome.com.tw/upload/images/20221008/20152047UHKsCxUzg0.png

mobile
https://ithelp.ithome.com.tw/upload/images/20221008/20152047ok0sRFGQL8.png

載入 google fonts 字型

網站使用兩種字型,RobotoNoto Sans TC,這邊已經幫大家準備好字型種類與粗細,複製到 head 區塊即可。

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500&family=Roboto&display=swap"/>

https://ithelp.ithome.com.tw/upload/images/20221007/20152047X3ZDbjgSxS.png

載入 google fonts 後,我們要把字型用在我們的網站上,比較好的做法是寫在 CSS 或 SCSS 裡。
由於我們沒有打算在撰寫 CSS 或 SCSS ,直接在 body 區塊寫上 style 給予 body 字型樣式。

<body>
  <style>
    body {
      font-family: "Roboto", "Noto Sans TC", sans-serif;
    }
  </style>
</body>

設定參數

Day06 - 自定義參數 有介紹自定義參數,這裡就不再贅述,參數命名沒有限制。
https://ithelp.ithome.com.tw/upload/images/20221007/201520479bbOBIxG6n.png

picture 標籤 - 響應式圖片

Day07 - Display 的大小事 我們有提到 hidden,利用 display: none 隱藏特性用於上方 logo 切換。

<img src="./img/logo/taiwan-mobile-logo.svg" alt="logo" class="md:hidden" />
<img src="./img/logo/taiwan-pc-logo.svg" alt="logo" class="hidden md:block" />

另一種做法使用 picture 標籤,標籤內包含 media 斷點,能依據斷點還有圖片來源自動切換。

<picture>
  <source srcset="./img/logo/taiwan-pc-logo.svg" media="(min-width: 768px)" />
  <img src="./img/logo/taiwan-mobile-logo.svg" alt="logo" />
</picture>

核心觀念

  1. 滾動視窗時 header 要固定在最上方且不能被其他元素覆蓋(權重要高),logo 與我的最愛按鈕呈現左右排版兩個元素分別貼齊兩側
  • fixed
  • flex
  • justify-between
  • items-center
  • z-999
<header class="... fixed top-0 left-0 z-999 flex items-center justify-between"></header>
  1. header 背景附加陰影
  • shadow
<header class="... shadow-3xl"></header>
  1. 我的最愛按鈕右上小區塊需要定位在右上方並超出按鈕範圍,滑鼠停留按鈕時,平滑的改變按鈕及內層愛心(愛心為 svg 檔,變換顏色要使用 fill)的背景顏色。
  • 父層 relative
  • 定位的元素 absolute
  • 負值 top / right
  • hover
  • group、group-hover
  • fill
  • duration-300
<button type="button" class="... relative duration-300 hover:bg-gray-400">
  <svg class="fill-gray-100 duration-300 group-hover:fill-primary"></svg>
  <span class="... absolute -top-1.5 -right-1.5">3</span>
</button>

檔案連結

本日重點

  1. google fonts 載入
  2. 給予 body 字型樣式
  3. 自定義參數
  4. flex 與 position 運用
  5. 陰影效果的輔助
  6. hover 與 transition 搭配

參考


上一篇
Day23 - 套件利於開發
下一篇
Day25 -【實戰演練】Taiwan NO.1 Tour - 類別選單
系列文
從零開始的 Tailwind CSS 學習之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言